<template>
	<view class="content">
		<view class="top">
			<view class="title">{{name}}</view>
			<view v-if="src && type == 1" class="cont" style="background-image: url('../../static/image/word.png');background-size: 100% 100%;">
				<i class="iconfont iconwendangziyuan"></i>
				<!-- <view class="tips">购买后可下载查看</view> -->
				<view class="tips" @tap="download">点击下载查看</view>
			</view>
			<video v-if="src && type == 2" :src="src" controls></video>
			<!-- <audio v-if="type == 3" :src="src" :name="name" controls></audio> -->
			<uni-listen v-if="src && type == 3" :src="src" :name="name" :play="audioPlay" :allowPlay="allowPlay" @update="update"></uni-listen>
			<!-- <view class="cont" v-if="type == 3">
				<image src="../../static/image/voice.png" mode="aspectFit"></image>
				<view class="icon"><i class="iconfont iconbofangsanjiaoxing"></i></view>
				<view class="tips">试听2分钟，共8分钟</view>
			</view> -->
			<!-- <view class="button">￥9.9  立即购买</view>
			<view class="button" @tap="goRating">已购买，去评价</view>
			<view class="button" @tap="goCheck">已购买，查看我的评价</view> -->
		</view>
		<!-- 资源评价 -->
		<view class="list" v-if="state == 1">
			<view class="listTitle">
				<view class="list-title">资源评价</view>
				<view class="score">{{num}}</view>
			</view>
			<view class="none" v-if="dataList.length == 0">暂无评价</view>
			<view class="item" v-else v-for="(item,index) in dataList" :key="index">
				<view class="image">
					<image :src="item.avatar ? item.avatar : defimg"></image>
				</view>
				<view class="info">
					<view class="name">
						<text>{{item.nicheng}}{{item.nicheng}}{{item.nicheng}}</text>
						<uni-rate :readonly="true" :size="18" :value="item.apply_star_num"></uni-rate>
					</view>
					<view class="evaluate">{{item.apply_text}}</view>
					<view class="time">{{item.time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import uniListen from "@/components/luch-audio/luch-audio.vue"
	export default{
		components:{
			uniRate,
			uniListen
		},
		data() {
			return {
				dataList: [], //评价内容列表
				tid: '', //资源id
				type: '' ,//资源类型 1为文档。2为视频，3为音频
				name: '',//资源名称
				num: '', //资源星级评分
				src: '', //资源路径
				audioPlay: false, //是否播放音频
				allowPlay: true, //音频是否允许播放
				state: 1, //是否显示资源评价
				defimg: this.defimg
			}
		},
		onLoad(e) {
			this.type = e.type;
			this.name = e.name;
			if(e.src) {
				this.src = e.src;
				this.state = e.state;
			} else {
				this.tid = e.tid;
				this.num = e.num;
				this.getUrl();
				this.getList();
			}
		},
		methods:{
			/* 获取资源路径 */
			getUrl() {
				var data = {
					tid: this.tid
				}
				this.$zapi.apiPost('user/resources.lists/ResPay',data).then(res=>{
					if(res.data.code == 200) {
						this.src = res.data.data[0].obj_url;
					} else {
						this.src = '';
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/* 获取资源评价列表 */
			getList() {
				var data = {
					tid: this.tid
				}
				this.$zapi.apiPost('user/resources.lists/ResEvaluateList',data).then(res=>{
					if(res.data.code == 200) {
						this.dataList = res.data.data.data;
						for(var i = 0; i < this.dataList.length; i++) {
							this.dataList[i].time = util.getBriefTime(this.dataList[i].creat_time);
						}
					} else {
						this.dataList = [];
					}
				})
			},
			download() {
				uni.downloadFile({
					url: this.src,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({
								'title':'下载成功',
								'icon': 'none'
							})
							var path = res.tempFilePath;
							uni.openDocument({
								filePath: path,
								success: function (res) {
									console.log('打开文档成功');
								}
							});
						}
					},
					fail: (res => {
						uni.showToast({
							'title':'下载失败',
							'icon': 'none'
						})
					})
				})
			},
			/* 去写评价 */
			goRating() {
				uni.navigateTo({
					url: 'assess?tid='+this.tid
				})
			},
			/* 查看我的评价 */
			goCheck() {
				uni.navigateTo({
					url: 'myRating?tid='+this.tid
				})
			},
			/* 改变音频播放状态 */
			update(state) {
				this.audioPlay = state;
			}
		}
	}
</script>

<style>
	page{
		background: #FAFAFA;
	}
	.top{
		background: #FFFFFF;
		padding: 30upx;
	}
	.title,
	.list-title{
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
		line-height: 1;
		margin-bottom: 30upx;
	}
	.cont{
		width: 100%;
		height: 392upx;
		background: linear-gradient(207deg,rgba(104,229,131,1) 0%,rgba(38,201,157,1) 100%);
		opacity: 1;
		border-radius: 12upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.iconwendangziyuan{
		font-size: 160upx;
		color: #FFFFFF;
	}
	.cont image {
		margin-left: 62upx;
	}
	video{
		width: 100%;
		border-radius: 12upx;
	}
	.icon{
		width: 104upx;
		height: 104upx;
		position: absolute;
		top: 250upx;
		background-color: rgba(0,0,0,.5);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		margin-left: calc(50% - 80upx);
	}
	.icon i {
		color: #FFFFFF;
		font-size: 40upx;
		line-height: 104upx;
	}
	.tips{
		background-color: rgba(0,0,0,.5);
		border-radius: 28upx;
		font-size: 26upx;
		padding: 16upx 28upx;
		position: absolute;
		top: 380upx;
		line-height: 1;
		color: #FFFFFF;
	}
	.button{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 34upx;
		background: linear-gradient(91deg,rgba(254,118,91,1) 0%,rgba(248,156,87,1) 100%);
		opacity: 1;
		border-radius: 40upx;
		margin: 30upx 0 10upx;
	}
	/* 资源评价 */
	.list{
		margin-top: 20upx;
		background: #FFFFFF;
		padding: 30upx;
	}
	.listTitle{
		display: flex;
		justify-content: space-between;
	}
	.list-title:before{
		content: "|";
		color: #00D5A2;
		margin-right: 10upx;
	}
	.score{
		color: #00D5A2;
		font-size: 36upx;
		font-weight: bold;
		line-height: 1;
	}
	.none{
		color: #999999;
		text-align: center;
		margin: 50upx 0;
	}
	.item{
		padding: 30upx 0 30upx 20upx;
		display: flex;
		justify-content: flex-start;
		border-bottom: 1upx solid #E5E5E5;
	}
	.item:last-child{
		border: none !important;
	}
	.image{
		width: 70upx;
		height: 70upx;
		margin-right: 20upx;
		border-radius: 50%;
	}
	.image image{
		width: 70upx;
		height: 70upx;
		border-radius: 50%;
	}
	.info{
		width: 100%;
	}
	.name{
		color: #666666;
		font-size: 28upx;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.name text{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.uni-rate-icon{
		margin-right: 10upx;
	}
	.evaluate{
		color: #333333;
		font-size: 34upx;
	}
	.time{
		color: #CCCCCC;
		font-size: 28upx;
	}
</style>
